<template>
  <el-container v-cloak>
    <el-aside width="200">
      <div style="height: 60px"></div>
      <el-menu
        :default-active="$route.path"
        router
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
      >
        <sub-menu :menus="$store.state.sides"></sub-menu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <el-row type="flex" class="row-bg" justify="space-between">
          <el-col :span="2"
            ><div class="grid-content close">
              <i
                :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
                @click="isCollapse = !isCollapse"
              ></i></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content">满满管理系统</div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content">
              <div class="signOut">
                <el-avatar
                  :size="45"
                  :src="$store.state.info.headimgurl|| '/headimg.jfif'"
                ></el-avatar>
                <span>{{ $store.state.roleName }}</span
                >:
                <a @click.prevent="quit">退出</a>
              </div>
            </div></el-col
          >
        </el-row>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import subMenu from "components/subMenu";
export default {
  data() {
    return {
      isCollapse: false,
    };
  },

  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    quit() {
      /* 开启等待框 */
      const loading = this.$loading({
        lock: true,
        text: "正在退出，请稍后...",
        background: "rgba(0,0,0,.7)",
      });

      setTimeout(() => {
        /* 清除侧边栏 */
        this.$store.commit("CLEAR_SIDE");
        /* 清除缓存权限 */
        this.$save.remove("TOKKU");
        /* 清除学员信息 */
        this.$save.remove("USERINFO");
        /* 跳转到登录页 */
        this.$router.push("/login");
        /* 关闭等待框 */
        loading.close();
      }, 800);
    },
  },
  components: {
    subMenu,
  },
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-header,
.el-footer {
  background-color: #4b4b4b;
  /* background: linear-gradient(135deg, #8abcd1, #694cdf); */
  /* background-image: linear-gradient(to right, #09203f 0%, #0f171d 100%); */
  color: #fff;
  text-align: center;
  line-height: 60px;
}
.el-menu-vertical-demo{
 /* background-color: transparent; */
}
.el-aside {
  background-color: #3d3d3d;
  /* background: linear-gradient(135deg, #8abcd1, #5c74fc); */
  /* background-image: linear-gradient(to bottom, #09203f 0%, #1a2b38 100%); */
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #fff;
  color: #333;
  text-align: center;
  /* line-height: 160px; */
}

.el-container {
  margin-bottom: 40px;
  height: 100%;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
}
.close {
  font-size: 40px;
  cursor: pointer;
}
.signOut {
  display: flex;
  justify-content: center;
  align-items: center;
}
.signOut a {
  cursor: pointer;

  color: #ff69b4;
}
.el-avatar {
  margin: 0 10px;
}
.signOut img {
  width: 45px;
  height: 45px;
  overflow: hidden;
  vertical-align: middle;
}
.signOut span {
  text-decoration: underline;
}
[v-cloak] {
  display: none;
}
</style>
